<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="h" uri="/syzg-html"%>
<!DOCTYPE html>
<html>
	<head>
		<%@ include file="/base/jsp/common/CommonListTop.jsp"%>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>[数据统计-栏目新闻浏览量]</title>
		<link href="${ctx}/base/css/base.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/base/css/common.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/base/css/${customTheme}.css" rel="stylesheet" type="text/css" />
		<script src="${ctx}/base/js/base.js" type="text/javascript"></script>
		<script src="${ctx}/base/js/common/FormFunction.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
		<link href="${ctx}/baseNew/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<script src="${ctx}/baseNew/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    	<link href="${ctx}/baseNew/other/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
		<script src="${ctx}/baseNew/other/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/other/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
		<link rel="stylesheet" href="${ctx}/baseNew/dist/css/AdminLTE.min.css">
  		<link rel="stylesheet" href="${ctx}/baseNew/dist/css/skins/_all-skins.min.css">
  		<script src="${ctx}/baseNew/other/js/bootbox.min.js" type="text/javascript"></script>
  		<link rel="stylesheet" href="${ctx}/baseNew/validator/css/bootstrapValidator.css"/>
		<script type="text/javascript" src="${ctx}/baseNew/validator/js/bootstrapValidator.js"></script>
		<link rel="stylesheet" href="${ctx}/zenithsun/css/admin-imgList.css"/>	
		<script src="${ctx}/base/js/echarts.js" type="text/javascript"></script>
	</head>
	<body class="rightBody">
			<table width="100%" class="title" border="0" cellspacing="0" cellpadding="0">
			<tr>
			  <th>
			    <img src="${ctx}/zenithsun/images/back.png" width="26" height="26" alt="图标 " class="icon" />
				<em class="headTips">数据统计</em> &gt;栏目新闻浏览量
			  </th>
			  <th width="200"></th>
			</tr>
			<tr>
				<td align="right" colspan="2">
				</td>
			</tr>
		</table>
		<div id="main" style="height: 250px;width: 100%;" ></div>  
		<div style="text-align: center;width: 100%;"><input id="btnGrid" type="button" value="显示数据列表"></div>
		<div id="grid" style="display: none;">
		<h:table cssClass="table table-bordered table-hover table-striped" cssStyle="margin-bottom:-5px;" value="result">
                <h:column headerTitle="栏目名称" width="10%">
                    ${o.name}
                </h:column>
                <h:column headerTitle="图片新闻浏览量" width="10%">
                    ${o.picCounter}
                </h:column>
				<h:column headerTitle="文字新闻浏览量" width="10%">
                    ${o.wordCounter}
                </h:column>
                <h:column headerTitle="新闻浏览总量" width="10%">
                    ${o.wordCounter+o.picCounter}
                </h:column>
			</h:table>
			</div>
	    <div id="myDlg"></div>
	    <%@ include file="/base/jsp/common/CommonListFoot.jsp"%>
	<script type="text/javascript">
	$(function(){
		//数据列表显示隐藏控制
		$('#btnGrid').click(function(){
			if($(this).val()=='显示数据列表'){
				$(this).val('隐藏数据列表');
				$('#grid').show();
			}else{
				$(this).val('显示数据列表');
				$('#grid').hide();
			}
		});
		//初始化列表数据
		initData();
     });
	function initData(){
		var picCounter1=[];
	    var wordCounter1=[];
	    var name1=[];
		$.ajax({
			type:"post",
			url:"${ctx}/statistics/columnsNewsPVCounter",
			dataType:'json',
			success:function(data){
		       for(var i=0;i<data.length;i++){
		         picCounter1.push(data[i].picCounter);
		         wordCounter1.push(data[i].wordCounter);
		         name1.push(data[i].name);
		       }
		       	drewChart(picCounter1,wordCounter1,name1);
			} 
		});
	}
	function drewChart(picCounter1,wordCounter1,name1){
		var myChart = echarts.init(document.getElementById("main"));
		var option={
		title: {
        text: ''
          },
		  tooltip: {
		       trigger: 'axis',
               axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                   type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
               formatter:function(params){
                   var res=params[0].name;
                   res+='<br/>'+params[0].seriesName+':'+params[0].value;
                   res+='<br/>'+params[1].seriesName+':'+params[1].value;
                   res+='<br/>新闻浏览总量:'+(params[0].value+params[1].value);
                    return res;
        },
		  },
		  legend: { data: ['图片新闻浏览量', '文字新闻浏览量']},
          grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},        
		  xAxis: [{type:'category',data:name1}],
          yAxis: [{type:'value',}],
          series: [
                     {
        name: '文字新闻浏览量',
        type: 'bar',
        stack: '总量',
        barWidth:40,
        label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                         }
                },
        data:wordCounter1
          },
           {
        name: '图片新闻浏览量',
        type: 'bar',
        stack: '总量',
        label: {
                normal: {show: true,position: 'insideRight'}
                }, data:picCounter1
          }
          ]
		};
		myChart.setOption(option,true);
	}

	</script>
	</body>	
</html>